import React from "react";
import "./index.scss"; // 修改了样式文件的引入方式

type DrawerProps = {
    children: React.ReactNode; // 接收外部传入的内容
    position: "left" | "right" | "top" | "bottom"; // 控制进入方向
    width?: string; // 可选的宽度
    height?: string; // 可选的高度
    isOpen: boolean; // 当前的显示状态
    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>; // 用于改变状态的函数
};

const Drawer: React.FC<DrawerProps> = ({
                                           children,
                                           position,
                                           width = "45%",
                                           height = "auto",
                                           isOpen,
                                           setIsOpen,
                                           ...props
                                       }) => {
    const getStyle = () => {
        const baseStyle = {
            width: "0",
            height: "100%",
            top: "0",
            left: "0",
        };

        switch (position) {
            case "left":
                return {
                    ...baseStyle,
                    width: isOpen ? width : "0",
                };
            case "right":
                return {
                    ...baseStyle,
                    right: "0",
                    left: "auto",
                    width: isOpen ? width : "0",
                };
            case "top":
                return {
                    ...baseStyle,
                    height: isOpen ? height : "0",
                    width: "100%",
                    top: isOpen ? "0" : "-100%", // 根据是否打开调整位置
                };
            case "bottom":
                return {
                    ...baseStyle,
                    height: isOpen ? height : "0",
                    width: "100%",
                    bottom: isOpen ? "0" : "-100%", // 根据是否打开调整位置
                    top: "auto",
                };
            default:
                return baseStyle;
        }
    };

    return (
        <>
            <div className={`drawer-overlay ${isOpen ? "drawer-overlay-open" : ""}`}
                 onClick={() => setIsOpen(false)}></div>
            <div className={`drawer drawer-${position} ${isOpen ? "drawer-open" : ""}`} style={getStyle()} {...props}>
                {children}
            </div>
        </>
    );
};

export default Drawer;